* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

$lifontsize: 0.4rem;

// 颜色变量
// 渐变变量
$gradient-color: linear-gradient(#FF6040, #FF8A80);
// 白色变量
$white-color: #fff;

// 封装可水平滚动的 ul 列表样式
@mixin scrollable-horizontal-list($childSelector: 'li', $fontSize: $lifontsize, $padding: 0 .4rem) {
  display: flex;
  overflow-x: auto;
  /* 允许水平滚动 */
  white-space: nowrap;
  /* 文本不换行 */
  /* 去除滚动条 */
  -ms-overflow-style: none;
  /* IE 和 Edge */
  scrollbar-width: none;
  /* Firefox */

  #{$childSelector} {
    font-size: $fontSize;
    flex-shrink: 0;
    /* 防止项目收缩 */
    padding: $padding;
    /* 添加一些内边距 */
  }

  &::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari 和 Opera */
  }
}

// 使用示例
ul {
  @include scrollable-horizontal-list;
}